<template>
  <div>
    <el-card style="padding: 20px">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
              <el-form-item label="仪器编号">
                <el-input v-model="searchInfo.AnalyserNum" placeholder="仪器编号"/>
              </el-form-item>
              <el-form-item label="破碎站编号">
                <el-input v-model="searchInfo.CrushingPlant" placeholder="破碎站编号"/>
              </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px; padding: 20px" >
      <div class="gva-btn-list">
        <el-button type="primary" @click="openDialog('add')">新增</el-button>
        <el-popover v-model:visible="deleteVisible" placement="top" width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button size="small" class="primary-button" @click="onDelete">确定</el-button>
            <el-button size="small" class="common-button" @click="deleteVisible = false">取消</el-button>
          </div>
          <template #reference>
            <el-button type="primary" :disabled="!objs.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
          </template>
        </el-popover>
        <el-button @click="onSubmit">刷新</el-button>
        </div>
      <el-table border :scrollbar-always-on="true" :style="{ 'border-bottom': '1px solid #ebeef5' }"
        :header-cell-style="{ 'border-bottom': '1px solid #ebeef5', 'background-color': '#f5f8fc' }" height="400px"
        :data="tableData" @sort-change="onSortChange" @selection-change="onSelectionChange">
	      <el-table-column type="selection" width="55" />
		  <el-table-column v-for="item in listFields" :label="item.title" align="center" :prop="item.key" :key="item.key" :sortable="item.sorter ? 'custom' : false">
			<template #default="scope">
			  <data-table-item :itemRender="item.render" :itemData="scope.row[item.dataIndex]" />
			</template>
		  </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              icon="edit"
              size="small"
              class="common-button"
              @click="editObject(scope.row)"
            >编辑</el-button>
            <el-button
              icon="delete"
              size="small"
              class="del-button"
              @click="deleteObject(scope.row)"
            >删除</el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </el-card>
     <el-drawer v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" center width="40%">
      <el-form ref="objForm" :model="objInfo" :rules="rules" label-position="left" label-width="25%" style="width: 70%; margin: auto">
        <el-form-item label="仪器编号" prop="AnalyserNum" placeholder="请输入仪器编号" >
          	<el-input v-model="objInfo.AnalyserNum" ></el-input>
        </el-form-item>
        <el-form-item label="破碎站编号" prop="CrushingPlant" placeholder="请输入破碎站编号" >
          	<el-input v-model="objInfo.CrushingPlant" ></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="TestAt" placeholder="请输入时间" >
          	<el-input v-model="objInfo.TestAt" ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="Status">
          <el-select v-model="objInfo.Status">
            <el-option v-for="item in StatusList" :label="item.desc" :value="item.id" :key="item.id">
            </el-option>
          </el-select>  
        </el-form-item>
        <el-form-item label="速度" prop="Speed" placeholder="请输入速度" >
          	<el-input v-model="objInfo.Speed" ></el-input>
        </el-form-item>
        <el-form-item label="流量" prop="Flux" placeholder="请输入流量" >
          	<el-input v-model="objInfo.Flux" ></el-input>
        </el-form-item>
        <el-form-item label="载荷" prop="Load" placeholder="请输入载荷" >
          	<el-input v-model="objInfo.Load" ></el-input>
        </el-form-item>
        <el-form-item label="SiO2" prop="Mat1" placeholder="请输入SiO2" >
          	<el-input v-model="objInfo.Mat1" ></el-input>
        </el-form-item>
        <el-form-item label="Al2O3" prop="Mat2" placeholder="请输入Al2O3" >
          	<el-input v-model="objInfo.Mat2" ></el-input>
        </el-form-item>
        <el-form-item label="Fe2O3" prop="Mat3" placeholder="请输入Fe2O3" >
          	<el-input v-model="objInfo.Mat3" ></el-input>
        </el-form-item>
        <el-form-item label="CaO" prop="Mat4" placeholder="请输入CaO" >
          	<el-input v-model="objInfo.Mat4" ></el-input>
        </el-form-item>
        <el-form-item label="MgO" prop="Mat5" placeholder="请输入MgO" >
          	<el-input v-model="objInfo.Mat5" ></el-input>
        </el-form-item>
        <el-form-item label="K2O" prop="Mat6" placeholder="请输入K2O" >
          	<el-input v-model="objInfo.Mat6" ></el-input>
        </el-form-item>
        <el-form-item label="Na2O" prop="Mat7" placeholder="请输入Na2O" >
          	<el-input v-model="objInfo.Mat7" ></el-input>
        </el-form-item>
        <el-form-item label="SO3" prop="Mat8" placeholder="请输入SO3" >
          	<el-input v-model="objInfo.Mat8" ></el-input>
        </el-form-item>
        <el-form-item label="预留1" prop="Mat9" placeholder="请输入预留1" >
          	<el-input v-model="objInfo.Mat9" ></el-input>
        </el-form-item>
        <el-form-item label="预留2" prop="Mat10" placeholder="请输入预留2" >
          	<el-input v-model="objInfo.Mat10" ></el-input>
        </el-form-item>
        <el-form-item label="预留3" prop="Mat11" placeholder="请输入预留3" >
          	<el-input v-model="objInfo.Mat11" ></el-input>
        </el-form-item>
        <el-form-item label="预留4" prop="Mat12" placeholder="请输入预留4" >
          	<el-input v-model="objInfo.Mat12" ></el-input>
        </el-form-item>
        <el-form-item label="预留5" prop="Mat13" placeholder="请输入预留5" >
          	<el-input v-model="objInfo.Mat13" ></el-input>
        </el-form-item>
        <el-form-item label="预留6" prop="Mat14" placeholder="请输入预留6" >
          	<el-input v-model="objInfo.Mat14" ></el-input>
        </el-form-item>
        <el-form-item label="预留7" prop="Mat15" placeholder="请输入预留7" >
          	<el-input v-model="objInfo.Mat15" ></el-input>
        </el-form-item>
        <el-form-item label="预留8" prop="Mat16" placeholder="请输入预留8" >
          	<el-input v-model="objInfo.Mat16" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="enterDialog">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </template>
    </el-drawer>
  </div>
</template>    
<script>

import Obj from './model'
export default {
  name: 'neutron_probe_YAnalyserView'
}
</script>
<script setup>

import warningBar from '@/components/warningBar/warningBar.vue'
import DataTableItem from '@/components/DataTableItem.vue'
import { ref } from 'vue'
import { convertString } from '@/utils/valueTools.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const obj = new Obj()
const objs = ref([])
const type = ref('')
const StatusList = [{ id: 0, desc: '正常' }, { id: 1, desc: '数据无效' }, { id: 2, desc: '数值报警' }]
const rules = ref({
	CrushingPlant: [{
	  required: false,
	  message: '请填写破碎站编号 ',
	  trigger: 'blur'
	}],
	AnalyserNum: [{
	  required: false,
	  message: '请填写仪器编号 ',
	  trigger: 'blur'
	}],
	Status: [{
	  required: false,
	  message: '请填写状态 ',
	  trigger: 'blur'
	}],
	TestAt: [{
	  required: false,
	  message: '请填写时间 ',
	  trigger: 'blur'
	}],
	Speed: [{
	  required: false,
	  message: '请填写速度 ',
	  trigger: 'blur'
	}],
	Flux: [{
	  required: false,
	  message: '请填写流量 ',
	  trigger: 'blur'
	}],
	Load: [{
	  required: false,
	  message: '请填写载荷 ',
	  trigger: 'blur'
	}],
	Mat1: [{
	  required: false,
	  message: '请填写SiO2 ',
	  trigger: 'blur'
	}],
	Mat2: [{
	  required: false,
	  message: '请填写Al2O3 ',
	  trigger: 'blur'
	}],
	Mat3: [{
	  required: false,
	  message: '请填写Fe2O3 ',
	  trigger: 'blur'
	}],
	Mat4: [{
	  required: false,
	  message: '请填写CaO ',
	  trigger: 'blur'
	}],
	Mat5: [{
	  required: false,
	  message: '请填写MgO ',
	  trigger: 'blur'
	}],
	Mat6: [{
	  required: false,
	  message: '请填写K2O ',
	  trigger: 'blur'
	}],
	Mat7: [{
	  required: false,
	  message: '请填写Na2O ',
	  trigger: 'blur'
	}],
	Mat8: [{
	  required: false,
	  message: '请填写SO3 ',
	  trigger: 'blur'
	}],
	Mat9: [{
	  required: false,
	  message: '请填写预留1 ',
	  trigger: 'blur'
	}],
	Mat10: [{
	  required: false,
	  message: '请填写预留2 ',
	  trigger: 'blur'
	}],
	Mat11: [{
	  required: false,
	  message: '请填写预留3 ',
	  trigger: 'blur'
	}],
	Mat12: [{
	  required: false,
	  message: '请填写预留4 ',
	  trigger: 'blur'
	}],
	Mat13: [{
	  required: false,
	  message: '请填写预留5 ',
	  trigger: 'blur'
	}],
	Mat14: [{
	  required: false,
	  message: '请填写预留6 ',
	  trigger: 'blur'
	}],
	Mat15: [{
	  required: false,
	  message: '请填写预留7 ',
	  trigger: 'blur'
	}],
	Mat16: [{
	  required: false,
	  message: '请填写预留8 ',
	  trigger: 'blur'
	}]})
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
const orderInfo = ref({})
const objForm = ref(null)
const objInfo = ref({
	CrushingPlant : null,
	AnalyserNum : null,
	Status : null,
	TestAt : null,
	Speed : null,
	Flux : null,
	Load : null,
	Mat1 : null,
	Mat2 : null,
	Mat3 : null,
	Mat4 : null,
	Mat5 : null,
	Mat6 : null,
	Mat7 : null,
	Mat8 : null,
	Mat9 : null,
	Mat10 : null,
	Mat11 : null,
	Mat12 : null,
	Mat13 : null,
	Mat14 : null,
	Mat15 : null,
	Mat16 : null
})
const onReset = () => {
  searchInfo.value = {}
  orderInfo.value = {}
}

// 搜索
const onSubmit = () => {
  page.value = 1
  pageSize.value = 10
  getTableData(true)
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData(true)
}

//改变当前页
const handleCurrentChange = (val) => {
  page.value = val
  getTableData(false)
}

// 排序
const onSortChange = ({ prop, order }) => {
  if (prop) {
    orderInfo.value.OrderKey = prop
    orderInfo.value.Desc = order === 'descending'
  }
  getTableData(false)
}

// 查询
// getTotalSize - 是否重新获取总尺寸
const getTableData = getTotalSize => {
  if(getTotalSize) {
  	//如果要重新获取总页数,则拉取总页数
  	obj.count4Page({ ...convertString(searchInfo.value) }).then(count => {
		if(count.code === 0) {
			total.value = count.count
			//计算最大的页码,页码从1开始
			const maxPage = total.value / pageSize.value + 1 
			if(page.value > maxPage ) {
				page.value = maxPage
			}
		}
	 })
  }
  obj.pageObj({ PageInfo: { Page: page.value, PageSize: pageSize.value } ,OrderInfo:{...orderInfo.value }, SearchInfo: { ...convertString(searchInfo.value) }}).then(table => {
	  if (table.code === 0) {
		tableData.value = table.list
	  }
  })
}

getTableData(true)
const listFields = obj.fields.filter(item => !item.hide); 


// 批量操作
const onSelectionChange = (val) => {
  objs.value = val
}

const deleteVisible = ref(false)
const onDelete = () => {
  const ids = objs.value.map(item => obj.getKey(item))
  obj.deleteObjs({ ids }).then(res => {
	  if (res.code === 0) {
		ElMessage({
		  type: 'success',
		  message: res.msg
		})
		if (tableData.value.length === ids.length && page.value > 1) {
		  page.value--
		}
		deleteVisible.value = false
		getTableData(true)
	}
  })
}
        
const initForm = () => {
  objForm.value.resetFields()
  objInfo.value = {
	CrushingPlant : null,
	AnalyserNum : null,
	Status : null,
	TestAt : null,
	Speed : null,
	Flux : null,
	Load : null,
	Mat1 : null,
	Mat2 : null,
	Mat3 : null,
	Mat4 : null,
	Mat5 : null,
	Mat6 : null,
	Mat7 : null,
	Mat8 : null,
	Mat9 : null,
	Mat10 : null,
	Mat11 : null,
	Mat12 : null,
	Mat13 : null,
	Mat14 : null,
	Mat15 : null,
	Mat16 : null
	}
}

const dialogTitle = ref('新增中子仪数据')
const dialogFormVisible = ref(false)
const updateOrCreate = ref(true)
const openDialog = (key) => {
  switch (key) {
    case 'add':
      dialogTitle.value = '新增中子仪数据'
	  updateOrCreate.value = true
      break
    case 'edit':
      dialogTitle.value = '编辑中子仪数据'
      updateOrCreate.value = false
	  break
    default:
      break
  }
  type.value = key
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

const editObject = (row) => {
  obj.getObjById({ ID: obj.getKey(row) }).then(res => {
	  if(res.code === 0) {
		obj.format4Select(res.value)  
		objInfo.value = res.value
		openDialog('edit')
	  }
  })
}

const enterDialog = () => {
  objForm.value.validate(valid => {
    if (valid) {
      switch (type.value) {
        case 'add':
          {
            obj.createObj(objInfo.value).then(res => {
				if (res.code === 0) {
				  ElMessage({
					type: 'success',
					message: '添加成功',
					showClose: true
				  })
				}
				getTableData(true)
				closeDialog()
			})
		  }
          break
        case 'edit':
          {
            obj.updateObj(objInfo.value).then(res => {
				if (res.code === 0) {
				  ElMessage({
					type: 'success',
					message: '编辑成功',
					showClose: true
				  })
				}
				getTableData(false)
				closeDialog()
			})
          }
          break
        default:
          // eslint-disable-next-line no-lone-blocks
          {
            ElMessage({
              type: 'error',
              message: '未知操作',
              showClose: true
            })
          }
          break
      }
    }
  })
}

const deleteObject = (row) => {
  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      obj.deleteObj(row).then(res => {
		  if (res.code === 0) {
			ElMessage({
			  type: 'success',
			  message: '删除成功!'
			})
			if (tableData.value.length === 1 && page.value > 1) {
			  page.value--
			}
			getTableData(true)
		  }
	   })
    })
}

</script>